<template>
  <div class="my-demands-container">
    <div class="page-header">
      <h1>我的需求</h1>
      <el-button type="primary" @click="goToPublishDemand">发布新需求</el-button>
    </div>
    
    <div class="demand-filters">
      <el-input v-model="searchKeyword" placeholder="搜索需求标题" class="search-input" @keyup.enter="handleSearch">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
        <template #append>
          <el-button @click="handleSearch">搜索</el-button>
        </template>
      </el-input>
      <el-button @click="resetFilters" class="reset-button">重置</el-button>
    </div>
    
    <div class="demand-list">
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="3" animated />
        <p>加载中...</p>
      </div>
      
      <div v-else-if="filteredDemands.length === 0" class="empty-container">
        <el-empty description="暂无需求数据" />
        <el-button type="primary" @click="goToPublishDemand" style="margin-top: 20px;">发布需求</el-button>
      </div>
      
      <div v-else class="demand-cards">
        <div v-for="demand in filteredDemands" :key="demand.id" class="demand-card" @click="viewDemandDetail(demand)">
          <div class="card-header">
            <h3 class="demand-title">{{ demand.title }}</h3>
            <span :class="['status-badge', `status-${demand.status}`]">{{ getStatusText(demand.status) }}</span>
          </div>
          
          <div class="card-content">
            <p class="demand-description">{{ truncateText(demand.description, 100) }}</p>
            
            <div class="demand-info">
              <div class="info-item">
                <i class="el-icon-money"></i>
                <span>预算：{{ formatBudget(demand.budget) }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-date"></i>
                <span>截止日期：{{ formatDate(demand.deadline) }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-time"></i>
                <span>发布时间：{{ formatDate(demand.publishTime) }}</span>
              </div>
            </div>
            
            <!-- 接单企业信息展示 -->
            <div v-if="demand.acceptedEnterprise" class="enterprise-info">
              <div class="info-label">接单企业：</div>
              <div class="enterprise-detail">
                <div class="enterprise-name">{{ demand.acceptedEnterprise.name }}</div>
                <div class="enterprise-status">
                  报价：¥{{ demand.bidAmount || '未报价' }} | 
                  接单状态：{{ getOrderStatusText(demand.orderStatus) }}
                </div>
              </div>
            </div>
          </div>
          
          <div class="card-footer">
            <div class="action-buttons">
              <el-button size="small" link @click.stop="() => { viewDemandDetail(demand); switchToEditMode(); }">编辑</el-button>
              <el-button size="small" link @click.stop="deleteDemandConfirm(demand)" v-if="canDelete(demand)">删除</el-button>
              <el-button size="small" type="primary" @click.stop="viewOrderDetails(demand)" v-if="demand.acceptedEnterprise">查看详情</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分页组件 -->
    <div v-if="!loading && filteredDemands.length > 0" class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    
    <!-- 删除确认对话框 -->
    <el-dialog v-model="deleteDialogVisible" title="确认删除" width="30%">
      <span>确定要删除该需求吗？此操作不可撤销。</span>
      <template #footer>
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定删除</el-button>
      </template>
    </el-dialog>
    
    <!-- 需求详情对话框 -->
    <el-dialog v-model="detailDialogVisible" :title="isEditMode ? '编辑需求' : '需求详情'" width="50%">
      <el-form v-if="currentDetailDemand" :model="currentDetailDemand" label-width="120px">
        <!-- 基本信息 -->
        <el-form-item label="需求标题">
          <div v-if="!isEditMode" class="detail-text">{{ currentDetailDemand.title }}</div>
          <el-input v-else v-model="currentDetailDemand.title" placeholder="请输入需求标题" maxlength="50" show-word-limit />
        </el-form-item>
        
        <el-form-item label="需求描述">
          <div v-if="!isEditMode" class="detail-text">{{ currentDetailDemand.description }}</div>
          <el-input v-else v-model="currentDetailDemand.description" type="textarea" :rows="4" placeholder="请输入需求描述" />
        </el-form-item>
        
        <el-form-item label="预算金额">
          <div v-if="!isEditMode" class="detail-text">{{ formatBudget(currentDetailDemand.budget) }}</div>
          <el-input-number v-else v-model="currentDetailDemand.budget" :min="0" placeholder="请输入预算金额" style="width: 100%;" />
        </el-form-item>
        
        <el-form-item label="截止日期">
          <div v-if="!isEditMode" class="detail-text">{{ formatDate(currentDetailDemand.deadline) }}</div>
          <el-date-picker v-else v-model="currentDetailDemand.deadline" type="datetime" placeholder="选择截止日期" style="width: 100%;" />
        </el-form-item>
        
        <el-form-item label="发布时间">
          <div class="detail-text">{{ formatDate(currentDetailDemand.publishTime) }}</div>
        </el-form-item>
        
        <el-form-item label="需求状态">
          <div class="detail-text status-badge" :class="`status-${currentDetailDemand.status}`">
            {{ getStatusText(currentDetailDemand.status) }}
          </div>
        </el-form-item>
        
        <!-- 接单企业信息 -->
        <template v-if="currentDetailDemand.acceptedEnterprise">
          <el-divider>接单企业信息</el-divider>
          
          <el-form-item label="企业名称">
            <div class="detail-text">{{ currentDetailDemand.acceptedEnterprise.name }}</div>
          </el-form-item>
          
          <el-form-item label="报价金额">
            <div class="detail-text">¥{{ currentDetailDemand.bidAmount || '未报价' }}</div>
          </el-form-item>
          
          <el-form-item label="订单状态">
            <div class="detail-text">{{ getOrderStatusText(currentDetailDemand.orderStatus) }}</div>
          </el-form-item>
        </template>
      </el-form>
      
      <template #footer>
        <div v-if="!isEditMode">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button 
            type="primary" 
            @click="switchToEditMode" 
            v-if="[0, 1, 3].includes(currentDetailDemand?.status)"
          >
            编辑
          </el-button>
          <el-button 
            type="danger" 
            @click="() => { detailDialogVisible = false; deleteDemandConfirm(currentDetailDemand); }" 
            v-if="canDelete(currentDetailDemand)"
          >
            删除
          </el-button>
          <el-button 
            type="success" 
            @click="() => { detailDialogVisible = false; viewOrderDetails(currentDetailDemand); }" 
            v-if="currentDetailDemand?.acceptedEnterprise"
          >
            查看订单详情
          </el-button>
        </div>
        <div v-else>
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveEditDemand">保存修改</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { ElSkeleton, ElMessage } from 'element-plus';
import { useMyDemands } from '../hooks/useMyDemands';

// 使用需求管理的hooks
const {
  demandList,
  filteredDemands,
  loading,
  searchKeyword,
  deleteDialogVisible,
  currentDeleteId,
  editDialogVisible,
  currentEditDemand,
  detailDialogVisible,
  currentDetailDemand,
  isEditMode,
  pagination,
  formatBudget,
  formatDate,
  getStatusText,
  getOrderStatusText,
  truncateText,
  canDelete,
  loadDemands,
  resetFilters,
  handleSearch,
  goToPublishDemand,
  viewDemandDetail,
  switchToEditMode,
  cancelEdit,
  editDemand,
  saveEditDemand,
  deleteDemandConfirm,
  confirmDelete,
  viewOrderDetails,
  handleSizeChange,
  handleCurrentChange
} = useMyDemands();

// 初始化加载数据
onMounted(() => {
  loadDemands();
});
</script>

<style scoped>
.my-demands-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  color: #303133;
  font-size: 20px;
}

.demand-filters {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-input {
  width: 300px;
}

.status-select {
  width: 200px;
}

.reset-button {
  white-space: nowrap;
}

.demand-list {
  min-height: 400px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: #909399;
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.demand-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.demand-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.demand-card:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.demand-title {
  margin: 0;
  font-size: 18px;
  color: #303133;
  font-weight: 500;
  flex: 1;
  margin-right: 12px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-0 { background: #e6f7ff; color: #1890ff; }
.status-1 { background: #f0f9eb; color: #52c41a; }
.status-2 { background: #fff1f0; color: #ff4d4f; }
.status-3 { background: #f6ffed; color: #73d13d; }
.status-4 { background: #fff7e6; color: #fa8c16; }
.status-5 { background: #f0f5ff; color: #597ef7; }
.status-6 { background: #f6ffed; color: #52c41a; }
.status-7 { background: #f5f5f5; color: #909399; }

.detail-text {
  padding: 8px 0;
  line-height: 1.6;
  color: #303133;
  font-size: 14px;
}

.card-content {
  margin-bottom: 16px;
}

.demand-description {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 16px;
}

.demand-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
}

.info-item i {
  margin-right: 6px;
  color: #c0c4cc;
}

.enterprise-info {
  margin-top: 16px;
  padding: 12px;
  background: #f0f9ff;
  border-radius: 6px;
  border-left: 4px solid #1890ff;
}

.info-label {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.enterprise-name {
  font-size: 16px;
  font-weight: 500;
  color: #1890ff;
  margin-bottom: 4px;
}

.enterprise-status {
  font-size: 14px;
  color: #606266;
}

.card-footer {
  border-top: 1px solid #ebeef5;
  padding-top: 16px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .demand-filters {
    flex-direction: column;
  }
  
  .search-input,
  .status-select {
    width: 100%;
  }
  
  .demand-cards {
    grid-template-columns: 1fr;
  }
  
  .card-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .status-badge {
    align-self: flex-start;
  }
}
</style>